<template>
  <el-popover popper-class="icon-picker"
    placement="bottom-start"
    :width="242"
    trigger="click">
    <template #reference>
      <div class="icon-picker-input">
        <el-input :readonly="true"
          size="mini"
          v-model="input"
          placeholder=""
          @focus="inputFocus"></el-input>
        <span class="selected-icon">
          <i :style="{'color': selected.color}"
            :class="['font', 'iconfont', selected.value]"></i>
        </span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </template>
    <div class="icon-list">
      <span class="icon-box"
        v-for="(item, i) in iconList"
        :key="i"
        @click="selectIcon(item)">
        <i :style="{'color': item.color}"
          :class="['font', 'iconfont', item.value]"></i>
      </span>
    </div>
  </el-popover>
</template>

<script>
  export default {
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        input: '',
        selected: {},
        iconList: [
          {
            value: 'icon-tx-fill-sanjiaoxing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-fill-liubianxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-fill-zhengfangxing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-fill-yuanxing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-fill-pinghangsibianxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-fill-wubianxing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-fill-liujiaoxingxing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-fill-lingxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-fill-babianxing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-fill-tuoyuanxing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-fill-changfangxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-fill-wujiaoxingxing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-fill-tixing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-fill-shizixing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-fill-xieshizixing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-babianxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-sanjiaoxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-pinghangsibianxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-lingxing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-liubianxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-xieshizixing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-wubianxing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-tuoyuanxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-liujiaoxingxing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-shizixing',
            color: '#66CCBD'
          },
          {
            value: 'icon-tx-changfangxing',
            color: '#FFBF34'
          },
          {
            value: 'icon-tx-zhengfangxing',
            color: '#FF5E5E'
          },
          {
            value: 'icon-tx-yuanxing',
            color: '#66CCBD'
          }
        ]
      };
    },
    mounted() {
      if (this.modelValue && this.modelValue.value) {
        this.selected = this.modelValue;
      } else {
        this.selected = {
          value: 'icon-tx-fill-sanjiaoxing',
          color: '#66CCBD'
        };
      }
      this.$emit('update:modelValue', this.selected);
    },
    methods: {
      inputFocus() {},
      selectIcon(val) {
        this.placeholder = '';
        if (val.value !== 'el-icon-close') {
          this.selected = val;
        } else {
          this.selected = {};
        }
        this.$emit('update:modelValue', this.selected);
      }
    }
  };
</script>

<style lang="scss">
  .icon-picker-input {
    position: relative;
    .selected-icon {
      position: absolute;
      top: 6px;
      left: 30px;
      font-size: 14px;
    }
    .el-icon-arrow-down {
      position: absolute;
      top: 8px;
      right: 4px;
    }
  }
  .icon-picker {
    .icon-box {
      display: inline-block;
      padding: 5px;
      font-size: 14px;
    }
  }
</style>
